<template>
  <div id="app" class="skTableHeader">
    <a-row type="flex" :gutter="[12, 28]">
      <a-col>
        <a-select v-model="searchData.gradeId" placeholder="年级" style="width: 120px;" @select="getClass">
          <a-select-option
            v-for="item in gradeList"
            :key="item.value"
            :value="item.value"
          > {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <a-select v-model="searchData.classId" placeholder="班级" style="width: 120px;"  @select="getStu">
          <a-select-option
            v-for="item in classList"
            :key="item.id"
            :value="item.id"
          >{{ item.className }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col >
        <a-select v-model="searchData.stuId" placeholder="幼儿" style="width: 120px;" @change="selectStu">
          <a-select-option
            v-for="item in studentList"
            :key="item.id"
            :value="item.id"
          >{{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <a-select v-model="searchData.dateType" placeholder="类型" style="width: 120px;" @change="selectDate">
          <a-select-option
            v-for="item in dateTypeList"
            :key="item.value"
            :value="item.value"
          >{{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <a-select v-model="searchData.courseType" placeholder="课程" allowClear style="width: 120px;" @change="getDataFrom">
          <a-select-option
            v-for="item in courseList"
            :key="item.value"
            :value="item.value"
          >{{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <a-range-picker
          format="YYYY-MM-DD"
          v-model="date"
          @change="onChange"
        />
      </a-col>
      <a-col>
        <a-button type="primary" icon="download" @click="handleDownload">导出</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { skClassList, querySkSemester } from '@/api/management.js'
import { skStudentList } from '@/api/management.js'
import moment from 'moment';
import {  filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'skTableHeader',
  data() {
    return {
      searchData:{
        gradeId:"",
        gradeName:"全园",
        classId:undefined,
        stuId:undefined,
        startDate:undefined,
        endDate:undefined,
        dateType:1,
        courseType:undefined
      },
      gradeList:[],
      classList:[],
      studentList:[],
      semesterSDate:"",
      semesterEDate:"",
      date:[],
      dateTypeList:[
        {label:"今天", value:0},
        {label:"本周", value:1},
        {label:"本月", value:2},
        {label:"本学期", value:3}
      ],
      courseList:[
        {label:"晨间体能大循环", value:"晨间体能大循环"},
        {label:"早操体能大循环", value:"早操体能大循环"}
      ]
    }
  },
  props:[],
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.selectDate(true);
    this.getGrade();
    this.getDataFrom();
    this.getSkSemester();
  },
  
  activated() {
  },

  mounted() {
  },

  methods: {
    moment,
    onChange(dates, dateStrings) {
      this.searchData.dateType = undefined;
      this.searchData.dateTypeName = "";
      this.searchData.startDate = dateStrings[0];
      this.searchData.endDate = dateStrings[1];
      this.getDataFrom();
    },
    // 填写日期--默认为本周
    selectDate(defaultDate){
      this.date = [];
      const dateTypeItem = this.dateTypeList.find(item=>item.value == this.searchData.dateType);
      this.searchData.dateTypeName = dateTypeItem.label;
      switch (this.searchData.dateType) {
        case 0:
          this.date.push(moment(), moment());
          break;
        case 2:
          this.date.push(moment().startOf('months').subtract(0,'months'),moment().endOf('month'));
          break;
        case 3:
          if (!this.semesterSDate && !this.semesterEDate) {
            this.$message.warning('请设置本学期');
            return ;
          }
          this.date.push(moment(this.semesterSDate), moment(this.semesterEDate));
          break;
        default:
          this.date.push(moment().startOf('weeks').subtract(0,'weeks'),moment().endOf('weeks'));
          break;
      }
      this.searchData.startDate = moment(this.date[0]).format('YYYY-MM-DD');
      this.searchData.endDate = moment(this.date[1]).format('YYYY-MM-DD');
      this.getDataFrom();
    },
    // 根据班级获取学校中存在的年级
    async getGrade(){
      const classList = await this.getClassList();
      let gradeList = [];
      classList.forEach(el => {
        gradeList.push({label:filterDictTextByCache("class_type",el.classType),value:el.classType});
      });
      this.gradeList = this.$skCommon.uniqueLastChild(gradeList, "value").sort((a, b)=>{
        return a.value - b.value
      })
      this.gradeList.unshift( {label:"全园",value:""})
    },
    // 根据选择的年级获取班级
    async getClass(val){
      this.searchData.classId = undefined;
      this.searchData.className = "";
      this.searchData.stuId = undefined;
      this.searchData.stuName = "";
      this.classList = [];
      this.studentList = [];
      const gradeItem = this.gradeList.find(item=>item.value == val);
      this.searchData.gradeName = gradeItem.label;
      if (val) {
        this.classList = await this.getClassList({classType:val})
      }
      await this.getDataFrom();
    },
    // 获取班级
    getClassList(params){
      return new Promise((resolve, reject) => {
        skClassList(params)
          .then(res => {
            if (res.success) {
              resolve(res.result)
            } else {
              this.$message.warning(res.message)
            }
          })
          .catch(error => {
            console.error(error)
          })
      })
    },
    // 根据班级获取幼儿
    getStu(val){
      this.searchData.stuId = undefined;
      this.searchData.stuName = "";
      this.studentList = [];
      const classItem = this.classList.find(item=>item.id == val);
      this.searchData.className = classItem.className;
      const params = {
        classId: val
      }
      skStudentList(params).then((res)=>{
        if(res.success){
          this.studentList = res.result
          this.getDataFrom();
        } else {
         this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 根据学期列表获取当前学期并赋值时间范围快捷选项
    getSkSemester() {
      querySkSemester()
        .then(res => {
          if (res.success) {
            if(res.result.records.length == 0) {
              this.$message.warning('请设置学期')
              return
            }
            let day = Date.parse(this.$skCommon.getDate(0));
            let Semester = res.result.records.filter(item=>{
              let time1 = Date.parse(item.startDate);
              let time2 = Date.parse(item.endDate);
              if (day > time1 && day < time2) {
                return item.id;
              }
            })
            this.semesterSDate = Semester[0].startDate;
            this.semesterEDate = Semester[0].endDate;
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 选择幼儿
    selectStu(){
      const stuItem = this.studentList.find(item=>item.id == this.searchData.stuId);
      this.searchData.stuName = stuItem.name;
      this.getDataFrom();
    },
    getDataFrom(){
      this.$emit("dataFrom", this.searchData)
    },
    // 导出
    handleDownload(){
      this.$emit("export")
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.date-box {
  text-align: center;
  cursor: pointer;
}
</style>
